<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e8e8e8;
      }
      .btn-class-name {
        --primary: 255, 90, 120;
        --secondary: 150, 50, 60;
        width: 60px;
        height: 50px;
        border: none;
        outline: none;
        cursor: pointer;
        user-select: none;
        touch-action: manipulation;
        outline: 10px solid rgb(var(--primary), 0.5);
        border-radius: 100%;
        position: relative;
        transition: 0.3s;
      }

      .btn-class-name .back {
        background: rgb(var(--secondary));
        border-radius: 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      .btn-class-name .front {
        background: linear-gradient(0deg, rgba(var(--primary), 0.6) 20%, rgba(var(--primary)) 50%);
        box-shadow: 0 0.5em 1em -0.2em rgba(var(--secondary), 0.5);
        border-radius: 100%;
        position: absolute;
        border: 1px solid rgb(var(--secondary));
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        font-weight: 600;
        font-family: inherit;
        transform: translateY(-15%);
        transition: 0.15s;
        color: rgb(var(--secondary));
      }

      .btn-class-name:active .front {
        transform: translateY(0%);
        box-shadow: 0 0;
      }
    </style>
  </head>
  <body>
    <button class="btn-class-name">
      <span class="back"></span>
      <span class="front"></span>
    </button>
  </body>
</html>
